@import "base";

html,body{
  background: #fff;
}

.body{
  max-width: 640px;
  height: 100%;
  overflow: hidden;
  margin: 0 auto;
  background: #000;
  #gameCanvas{
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  #success_send{
    position: absolute;
    top: 10%;
    left: 50%;
    margin-left: - PageSize(700px) / 2;
    width: PageSize(700px);
    height: 100%;
    visibility: hidden;
    background: url("../images/success-bg.png") no-repeat center top;
    background-size: 100%;
    padding-top: 30%;
    .input-container{
      width: 100%;
      padding-left: 10%;
      margin-top: 1rem;
      label{
        width: 30%;
        display: inline-block;
        img{
          width: 100%;
          vertical-align: middle;
        }
      }
      input{
        width: 70%;
        height: 1rem;
        line-height: 1rem;
        background: #bfb387;
        border: none;
        border-radius: 6px;
        overflow: hidden;
      }
      .button-container{
        display: inline-block;
        width: 30%;
        float: left;
        margin: 0 1rem;
        img{
          width: 100%;
        }
        &#restart{
          margin-left: 0;
        }
        &#share{

        }
        &#send{
          display: inline-block;
          float: left;
          margin-left: -.2rem;
          width: 74%;
          margin-top: 1rem;
        }
      }
    }
  }
}

.proload{
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  background: #000;
  text-align: center;
  .progress{
    font-size: 2rem;
    color: #fff;
  }
}